<template>
  <div class="comment-item">
    <!-- 显示当前评论内容 -->
    <div class="comment-content">
      <!-- 如果有父评论，则显示“xxx回复了yyy:”的格式 -->
      <div v-if="comment.parent_id">
        <strong>{{ comment.name }}</strong> 回复了
        <strong>{{ getParentUserName(comment.parent_id) }}</strong
        >:{{ comment.content }}
      </div>
      <!-- 如果没有父评论，则只显示“xxx说:”的格式 -->
      <div v-else>
        <strong>{{ comment.name }}</strong> 说:
        {{ comment.content }}
      </div>

      <div>
        <el-button
          v-if="role === 2"
          type="primary"
          text
          @click="handleDeleteClick(comment.id)"
          >删除</el-button
        >
      </div>
    </div>
    <!-- 子评论列表 -->
    <div class="comment-children">
      <!-- 递归地为每个子评论渲染一个CommentItem组件 -->
      <CommentItem
        v-for="child in comment.children"
        :key="child.id"
        :comment="child"
        :allComments="allComments"
        :role="role"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import usePostStore from '@/store/main/post/post'
import { ElMessageBox, ElMessage } from 'element-plus'

const postStore = usePostStore()

// 定义Comment接口
interface Comment {
  id: number
  name: string
  content: string
  parent_id: number | null
  children: Comment[]
}

export default defineComponent({
  name: 'CommentItem',
  components: {
    // 确保CommentItem组件可以递归调用自身
    CommentItem: () => import('./comment-item.vue')
  },
  props: {
    // 传入的comment对象，包含评论数据和子评论列表
    comment: {
      type: Object as PropType<Comment>,
      required: true
    },
    allComments: {
      required: true
    },
    role: {
      type: Number
    }
  },
  methods: {
    // 根据parentId递归查找父评论的名称
    getParentUserName(parentId: number): string {
      // 定义递归函数findParent
      const findParent = (
        comments: Comment[],
        pid: number
      ): Comment | undefined => {
        for (const comment of comments) {
          if (comment.id === pid) {
            return comment
          }
          if (comment.children) {
            // 递归搜索子评论列表
            const found = findParent(comment.children, pid)
            if (found) return found
          }
        }
      }

      // 调用递归函数从根评论开始查找
      const parentComment = findParent(this.allComments as [], parentId)
      return parentComment ? parentComment.name : '未知'
    },
    handleDeleteClick(comment_id: number) {
      ElMessageBox.confirm(`确认删除条评论吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await postStore.removeCommentByIdAction(comment_id)
        ElMessage({
          type: 'success',
          message: '删除成功',
          duration: 1000
        })
      })
    }
  }
})
</script>

<style scoped>
/* 以下是评论项样式 */
.comment-item {
  margin: 10px 0;
}
.comment-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
}
</style>
